<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: 'Vue2MapboxMapTemplate',
  data() {
    return {}
  },

  mounted() {
    this.initMap()
  },

  methods: {
    initMap() {
      // mapboxgl.accessToken = 'pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A'
      const map = new mapboxgl.Map({
        container: 'map', // container ID
        // style: 'mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z', // style URL
        style: {
          "version": 8,
          "sources": {
            "custom-source": {
              "type": "vector",
              "tiles": [
                "http://localhost:8081/tiles/water_line/{z}/{x}/{y}.pbf" // 替换成你的瓦片URL  
              ],
              // "tileSize": 256  
            }
          },
          "layers": [
            {
              "id": "custom-layer",
              "type": "line",
              "source": "custom-source",
              'source-layer': 'river',
              "paint": {
                'line-opacity': 0.9,
                'line-color': 'rgb(0, 100, 255)',
                'line-width': 2
              },
              "filter": ['==', '$type', 'LineString'],
              "minzoom": 0,
              "maxzoom": 22
            }
          ]
        },
        // center: [-87.622088, 41.878781],
        center: [111.79013542048335, 28.05775855185749], // starting position [lng, lat]
        // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
        zoom: 4, // starting zoom
        projection: 'mercator'
      })

      // 获取点击事件
      map.on('click', (evt) => {
        console.log(evt.lngLat)
        const features = map.queryRenderedFeatures(evt.point)
        console.log(features[0])
      })

      map.on('load', (e) => {
        map.addSource('vector_source', {
          type: 'vector',
          // scheme: 'tms',
          tiles: [
            // 'http://localhost:8081/tiles/{z}/{x}/{y}.pbf'
            // 'http://localhost:8081/tiles/water_surface/{z}/{x}/{y}.pbf'
            'http://localhost:8081/tiles/water_line/{z}/{x}/{y}.pbf'
            // 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Ageo_coll@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf'
            // 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3Ageo_coll@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf'
          ]
          // 'minzoom': 6,
          // 'maxzoom': 14
        })

        // map.addLayer(
        //   {
        //     id: 'mapillary-circle',
        //     type: 'circle',
        //     source: 'vector_source',
        //     'source-layer': 'geo_coll',
        //     layout: {

        //     },
        //     paint: {
        //       'circle-color': '#ff0000',
        //       'circle-radius': 10,
        //       'circle-stroke-width': 1,
        //       'circle-stroke-color': '#fff'
        //     },
        //     filter: ['==', '$type', 'Point']
        //   }
        // )

        // map.addLayer(
        //   {
        //     id: 'mapillary-line', // Layer ID
        //     type: 'line',
        //     source: 'vector_source',
        //     'source-layer': 'river',
        //     layout: {

        //     },
        //     paint: {
        //       'line-opacity': 0.9,
        //       'line-color': 'rgb(0, 100, 255)',
        //       'line-width': 2
        //     },
        //     filter: ['==', '$type', 'LineString']
        //   }
        // )

        // map.addLayer(
        //   {
        //     id: 'mapillary-polygon', // Layer ID
        //     type: 'fill',
        //     source: 'vector_source',
        //     // 'source-layer': 'geo_coll',
        //     'source-layer': 'river',
        //     layout: {
        //       // 'line-cap': 'round',
        //       // 'line-join': 'round'
        //     //   'text-field': '{code}'
        //     },
        //     paint: {
        //       'fill-opacity': 0.9,
        //       'fill-color': 'rgb(0, 255, 255)'
        //     },
        //     filter: ['==', '$type', 'Polygon']
        //   }
        // )

        map.on('click', (e) => {
          //   const bbox = [
          //     [e.point.x - 5, e.point.y - 5],
          //     [e.point.x + 5, e.point.y + 5]
          //   ]
          // const selectedFeatures = map.queryRenderedFeatures(bbox, {
          //     layers: ['counties']
          // });
          // console.log(selectedFeatures, 'selectedFeatures=============');
        })
      })
    }
  }
}
</script>

<style></style>
